<template>
  <div class="code-warp">
    <textarea ref="mycode" v-model="code"></textarea>
    <div class="save-wrap">
      <el-select-v2
          v-model="currentModeValue"
          :options="currentModes"
          placeholder="请选择"
          style="width: 100%;"
          @change="changeCurrentMod"
      />
      <div class="save-buttom">
        <el-button type="primary" @click="saveChange">Save Change</el-button>
      </div>
    </div>
  </div>

</template>
<script>

let _CodeMirror = require('codemirror/lib/codemirror')

let CodeMirror = window.CodeMirror || _CodeMirror

require('codemirror/mode/javascript/javascript')
require('codemirror/addon/lint/json-lint')
require('codemirror/addon/lint/lint')
require('codemirror/addon/selection/active-line')
require('codemirror/addon/edit/closebrackets')
require('codemirror/addon/edit/matchbrackets')

import jsonlint from 'jsonlint'

window.jsonlint = jsonlint.parser

require('codemirror/lib/codemirror.css')
require('codemirror/addon/lint/lint.css')

export default {
  name: 'codeEditor',
  components: {},
  props: ['codeContent'],
  data() {
    return {
      editor: null,
      currentModes: [
        {value: 'raw', label: 'Raw'},
        {value: 'json', label: 'Json'}
      ],
      currentModeValue: this.$store.state.currentMode,
    }
  },
  computed: {
    code() {

      let formatContent = this.$store.state.redisData.content
      if (this.$store.state.currentMode === 'json') {
        formatContent = this.tryFormatJson(this.$store.state.redisData.content, true)
      }
      return formatContent
    }
  },
  methods: {
    initCodemirror() {
      let options = {}
      const mod = this.$store.state.currentMode
      if (mod === 'json') {
        options = {
          mode: {
            name: 'text/javascript',
            json: true
          },
          styleActiveLine: true,
          matchBrackets: true,
          autoCloseBrackets: true,
          matchTags: true,
          lineNumbers: true,
          line: true,
          tabSize: 2,
          indentWithTabs: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true
        }
      } else {
        options = {
          mode: 'none',
          styleActiveLine: true,
          lineWrapping: true,
          gutters: ['CodeMirror-lint-markers'],
          lineNumbers: true
        }
      }

      this.editor = CodeMirror.fromTextArea(this.$refs.mycode, options)

      this.editor.setSize("100%", "100%")

    },
    tryFormatJson(jsonString, beautify) {
      try {
        const o = JSON.parse(jsonString)
        if (o && typeof o === 'object') {
          if (beautify) {
            return JSON.stringify(o, null, '\t')
          }
          return JSON.stringify(o)
        }
      } catch (e) { /**/
      }
      return "Json format faild,You can change to raw."
    },
    changeCurrentMod() {
      this.$store.commit('changeCurrentMode', this.currentModeValue)
      this.$nextTick(() => {
        this.$store.commit('changeEditorRandKey')
      })
    },
    saveChange() {
      const value = this.editor.getValue()
      let content = ''
      if (this.$store.state.currentMode === 'json') {
        content = this.tryFormatJson(value)
      } else {
        content = value
      }
      this.$store.state.redisData.content = content
    }
  },
  mounted() {
    this.code && this.initCodemirror()
  }
}

</script>

<style>
.CodeMirror {
  height: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: Consolas, monospace;
}
</style>
<style lang="less" scoped>

.code-warp {
  width: 100%;
  height: 100%;

  .save-wrap {
    position: fixed;
    z-index: 999;
    width: 125px;
    bottom: 60px;
    right: 20px;

    .save-buttom {
      padding-top: 10px;
    }
  }
}

</style>